<template>
    <div>
      <div class="card card-custom gutter-b example example-compact" id="tableBody">
        <div class="card-header">
          <div class="card-title">
            <span class="card-icon">              
              <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
            </span>
            <h3 class="card-label"> 查询区域 </h3>
          </div>
          <div class="card-toolbar">
            <div class="example-tools justify-content-center">
              <!-- 
                <span data-toggle="tooltip" class="example-toggle"></span>
                <span data-toggle="tooltip" class="example-copy"></span> 
              -->
            </div>
          </div>
        </div>
        <div class="card-body">
            <!--查询条件-->
            <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                <div class="m-portlet__body">
                    <div class="form-group m-form__group row">
                        <label class="col-form-label">授权系统:</label>
                        <div class="col-lg-2">
                            <el-select v-model="searchForm.sysModeId" placeholder="请选择">
                                <el-option
                                v-for="item in sysModeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                        <label class="col-form-label">类型:</label>
                        <div class="col-lg-2">
                          <el-select maxlength="20" v-model="searchForm.type" placeholder="请选择">
                              <el-option value="">请选择</el-option>
                              <el-option
                                  v-for="item in [{value:'0',label:'平台权限'},{value:'1',label:'业务权限'}]"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                              </el-option>
                          </el-select>
                        </div>
                        <label class="col-form-label">角色名称:</label>
                        <div class="col-lg-2">
                            <input type="text" class="form-control" v-model="searchForm.name" placeholder="请输入">
                        </div>
                        <b-button :pressed="false" variant="btn btn-primary font-weight-bold mr-2" @click="search()"><span><i class="fa fa-search"></i><span>查询</span></span></b-button>
                        <b-button :pressed="false" variant="btn btn-light font-weight-bold mr-2" @click="resetAll()"> <span><span>清空条件</span></span></b-button>
                    </div>
                </div>
                <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                    <div class="m-form__actions m-form__actions--solid">
                        <div class="row">
                            <div class="col m--align-left">
                                <button class="btn btn-light-success font-weight-bold font-size-sm py-3 px-8 mr-2 "
                                    @click="addOauthRole">
                                    <span><i class="la la-plus la-lg"></i><span>新 增</span></span>
                                </button>
        
                                <button class="btn btn-light-primary font-weight-bold font-size-sm py-3 px-8 mr-2"
                                    @click="updateOauthRole" :disabled="this.sels.length != 1">
                                    <span><i class="la la-pen-alt"></i><span>编 辑</span></span>
                                </button>
                                <!-- :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
                                <button class="btn btn-light-danger font-weight-bold font-size-sm py-3 px-8 mr-2"
                                    @click="delOauthRole" :disabled="this.sels.length === 0">
                                    <span><i class="far fa-trash-alt"></i><span>禁 用</span></span>
                                </button>
                            </div>
                            <div class="col m--align-right">
                                <button class="btn btn-secondary m-btn m-btn--custom m-btn--label-info m-btn--bolder font-size-sm py-3 px-8 mr-2" @click="initListDeleted">
                                  <span><i class="fa fa-history fa-lg"></i><span>找回角色</span></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--分页组件-->
        <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row :data="roleList" >
          <!-- 复选框 -->
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column label="序号" min-width="50">
            <template slot-scope="scope">
              {{scope.$index+1}} 
            </template>
          </el-table-column>
          <el-table-column align="left" prop="name" show-overflow-tooltip label="角色名称"></el-table-column>
          <el-table-column align="left" prop="sysName" show-overflow-tooltip label="授权系统"></el-table-column>   
          <el-table-column align="left" prop="type" show-overflow-tooltip label="类型">
            <template slot-scope="scope">
              <div v-if="scope.row.type == 0">
                <span class="label label-lg label-light-primary label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">平台权限</span>
              </div>
              <div v-else-if="scope.row.type == 1">
                <span class="label label-lg label-light-warning label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">业务权限</span>
              </div>
              <div v-else>
                <span class="label label-lg label-light-warning label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">未知</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="createBy" show-overflow-tooltip label="创建人"></el-table-column>  
          <el-table-column align="left" prop="createTime" show-overflow-tooltip label="创建时间"></el-table-column>  
          <el-table-column align="left" prop="modifiedBy" show-overflow-tooltip label="修改人"></el-table-column>  
          <el-table-column align="left" prop="updateTime" show-overflow-tooltip label="修改时间"></el-table-column>  
          <el-table-column align="center" label="操作" fixed="right" min-width="200">
            <template slot-scope="scope">
              <!--scope.row当前行的对象-->
              <a href="javascript:;" @click="getOauthRoleDetail(scope.row)" class="btn btn-sm btn-clean btn-icon" title="详情">	                            
                <span class="svg-icon svg-icon-primary svg-icon-2x">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <rect x="0" y="0" width="24" height="24"/>
                        <path d="M19.2078777,9.84836149 C20.3303823,11.0178941 21,12 21,12 C21,12 16.9090909,18 12,18 C11.6893441,18 11.3879033,17.9864845 11.0955026,17.9607365 L19.2078777,9.84836149 Z" fill="#000000" fill-rule="nonzero"/>
                        <path d="M14.5051465,6.49485351 L12,9 C10.3431458,9 9,10.3431458 9,12 L5.52661464,15.4733854 C3.75006453,13.8334911 3,
                        12 3,12 C3,12 5.45454545,6 12,6 C12.8665422,6 13.7075911,6.18695134 14.5051465,6.49485351 Z" fill="#000000" fill-rule="nonzero"/>
                        <rect fill="#000000" opacity="0.3" transform="translate(12.524621, 12.424621) rotate(-45.000000) translate(-12.524621, -12.424621) " x="3.02462111" y="11.4246212" width="19" height="2"/>
                    </g>
                  </svg>
                </span>		
                </a>

                <a href="javascript:;" @click="addOauthResources(scope.row)" class="btn btn-sm btn-clean btn-icon" title="分配资源">	                            
                  <span class="svg-icon svg-icon-primary svg-icon-2x">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                          <polygon points="0 0 24 0 24 24 0 24"/>
                          <path d="M22,15 L22,19 C22,20.1045695 21.1045695,21 20,21 L8,21 C5.790861,21 4,19.209139 4,
                          17 C4,14.790861 5.790861,13 8,13 L20,13 C21.1045695,13 22,13.8954305 22,15 Z M7,19 C8.1045695,19 9,18.1045695 9,17 C9,15.8954305 8.1045695,15 7,15 C5.8954305,15 5,15.8954305 5,17 C5,18.1045695 5.8954305,19 7,19 Z" fill="#000000" opacity="0.3"/>
                          <path d="M15.5421357,5.69999981 L18.3705628,8.52842693 C19.1516114,9.30947552 19.1516114,
                          10.5758055 18.3705628,11.3568541 L9.88528147,19.8421354 C8.3231843,21.4042326 5.79052439,
                          21.4042326 4.22842722,19.8421354 C2.66633005,18.2800383 2.66633005,15.7473784 4.22842722,
                          14.1852812 L12.7137086,5.69999981 C13.4947572,4.91895123 14.7610871,4.91895123 15.5421357,5.69999981 Z M7,
                          19 C8.1045695,19 9,18.1045695 9,17 C9,15.8954305 8.1045695,15 7,15 C5.8954305,15 5,15.8954305 5,17 C5,
                          18.1045695 5.8954305,19 7,19 Z" fill="#000000" opacity="0.3"/>
                          <path d="M5,3 L9,3 C10.1045695,3 11,3.8954305 11,5 L11,17 C11,19.209139 9.209139,21 7,
                          21 C4.790861,21 3,19.209139 3,17 L3,5 C3,3.8954305 3.8954305,3 5,3 Z M7,19 C8.1045695,19 9,18.1045695 9,
                          17 C9,15.8954305 8.1045695,15 7,15 C5.8954305,15 5,15.8954305 5,17 C5,18.1045695 5.8954305,19 7,19 Z" fill="#000000"/>
                      </g>
                    </svg>
                  </span>
                </a>

                <a href="javascript:;" @click="addOauthUserRole(scope.row)" class="btn btn-sm btn-clean btn-icon" title="分配账户">	                            
                    <span class="svg-icon svg-icon-primary svg-icon-2x">	                                
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <polygon points="0 0 24 0 24 24 0 24"/>
                                <path d="M18,8 L16,8 C15.4477153,8 15,7.55228475 15,7 C15,6.44771525 15.4477153,6 16,6 L18,6 L18,4 C18,
                                3.44771525 18.4477153,3 19,3 C19.5522847,3 20,3.44771525 20,4 L20,6 L22,6 C22.5522847,6 23,6.44771525 23,
                                7 C23,7.55228475 22.5522847,8 22,8 L20,8 L20,10 C20,10.5522847 19.5522847,11 19,11 C18.4477153,11 18,
                                10.5522847 18,10 L18,8 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,
                                7 C13,9.209139 11.209139,11 9,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                <path d="M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,
                                13 17.7048837,15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,
                                21 C13.541124,21 8.03472472,21 0.727502227,21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
                            </g>
                        </svg>                        
                    </span>							
                </a>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            hide-on-single-page   
            @size-change="handleSizeChange"        
            @current-change="handleCurrentChange"  
            :current-page="pageNo"                
            :page-sizes="[5, 10, 30, 50]"          
            :page-size="pageSize"			  
            layout="->,total, sizes, prev, pager, next, jumper"
            :total="totalCount">		
          </el-pagination>
        </div>
      </div>
      <OauthRoleAdd ref="oauthRoleAddRef" @change="search"></OauthRoleAdd><!--采用父窗口关闭传递的方法-->
      <OauthRoleUpdate ref="oauthRoleUpdateRef" @change="search"></OauthRoleUpdate><!--采用父窗口关闭传递的方法-->
      <OauthRoleDetail ref="oauthRoleDetailRef"></OauthRoleDetail>
      <OauthRoleDelete ref="oauthRoleDeleteRef"></OauthRoleDelete>   
      <OauthUserRole ref="oauthUserRoleRef"></OauthUserRole>   
      <OauthRoleResources ref="oauthRoleResourcesRef"></OauthRoleResources>    
  </div> 
</template>
  
<script>
  import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
  import OauthRoleAdd from "@/view/oauth/oauth-role/oauth-role-add.vue";
  import OauthRoleUpdate from "@/view/oauth/oauth-role/oauth-role-update.vue";
  import OauthRoleDetail from "@/view/oauth/oauth-role/oauth-role-detail.vue";
  import OauthRoleDelete from "@/view/oauth/oauth-role/oauth-role-delete-list.vue";
  import OauthUserRole from "@/view/oauth/oauth-role/oauth-user-role.vue";
  import OauthRoleResources from "@/view/oauth/oauth-role/oauth-role-resources.vue";
  import Swal from "sweetalert2";
  import apiUtil from "@/core/util/apiUtil.js"; 
  import { handleNotify,handleAlert,handleConfirm,showWating,closeWating} from "@/core/util/jehcUtil.js";
  export default {
    data(){
      return{
        searchForm:{sysModeId: "",type:'',name:""},
        sysModeList:[],
        roleList:[],
        sels: [], //当前选框选中的值
        pageNo:1,      // 默认当前是第一页
        pageSize:5,    // 当前每页的数据是5条
        totalCount:0   // 总数默认为0
      }
    },
    components: {
        OauthRoleAdd,
        OauthRoleUpdate,
        OauthRoleDetail,
        OauthRoleDelete,
        OauthUserRole,
        OauthRoleResources
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "角色权限" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
        this.initSysModeList();
    },
    methods:{
      initList(){
        showWating({renderBody:"tableBody"});
        var params = {};
        params.usePageNo = true;//采用第几页进行分页（兼容）
        params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
        params.pageNo = this.pageNo;//开始的记录序号   
        params.searchJson = JSON.stringify(this.searchForm);//为form元素     
        apiUtil.queryPage(process.env.VUE_APP_OAUTH_API+"/oauthRole/list?delFlag=0", params).then(({ data }) => {
          this.roleList = data.data;//给结果集赋值
          this.totalCount = data.total;// 获取当前数据的总数    
        });
      },    
     
      handleSelectionChange(sels) {//获取选中的值
        this.sels = sels;
      },
      addOauthRole(){//新建
        this.$refs.oauthRoleAddRef.showModal()
      },
      updateOauthRole(){// 更新
        if(this.sels.length != 1){
          handleAlert("请选择一条数据", "warning", 3)
          return;
        }
        let id = this.sels.map((item) => item.id);
        this.$refs.oauthRoleUpdateRef.showModal(id);
      },
      delOauthRole(){ // 禁用
        if(this.sels.length === 0){
          handleAlert("请选择禁用的数据", "warning", 3)
          return;
        }
        // 禁用前提示
        this.$confirm("确认禁用记录吗?", "提示", {type: "warning",}).then(() => {
          let ids = this.sels.map((item) => item.id);
          // 根据后台想要的参数格式选择
          // console.log(ids.join(",")); //1,2,3,4
          // console.log(ids); //[1,2,3,4]
          apiUtil.delete(process.env.VUE_APP_OAUTH_API+"/oauthRole/delete?id="+ids.join(",")).then(data=>{
            if(data.data.success){
              handleAlert("禁用成功", "success", 3);
              this.search();
            }else {
              handleAlert("禁用失败", "error", 3);
            }
          });
        }).catch(()=>{});//注意这里，这里是重点！！！;        
      },
      handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
        this.pageSize = val;  // 修改页的大小
        this.initList();       // 按新的pageNo和pageSize进行查询
      },
      handleCurrentChange(val) { // 修改当前页所触发的函数
        this.pageNo = val;       // 更新当前的页
        this.initList();          // 按新的pageNo和pageSize进行查询
      },
      search(){
        this.pageNo = 1;       // 更新当前的页
        this.initList();          // 按新的pageNo和pageSize进行查询
      },
      resetAll(){
        Object.assign(this.$data.searchForm, this.$options.data().searchForm);
        this.search();
      },
      getOauthRoleDetail(row){
        this.$refs.oauthRoleDetailRef.showModal(row.id);
      },
      initSysModeList(){
        let params = {};
            apiUtil.query(process.env.VUE_APP_OAUTH_API+"/oauthSysMode/listAll", params).then(({ data }) => {
                this.sysModeList = data.data;
            });
      },
      initListDeleted(){
        this.$refs.oauthRoleDeleteRef.showModal();
      },
      addOauthUserRole(row){
        this.$refs.oauthUserRoleRef.showModal(row);
      },
      addOauthResources(row){
        this.$refs.oauthRoleResourcesRef.showModal(row);
      }
    }
  };
</script>